<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>商品列表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    //定义一个数组，模拟从服务器请求回来的多个商品对象
    let productArr = [
        {title:'小米14', price:8000,num:200 },
        {title:'华为P50', price:9000,num:300 },
        {title:'苹果14', price:10000,num:400 },
        {title:'OPPO Reno8', price:6000,num:500 },
        {title:'一加13', price:7000,num:700 },
        {title:'三星Galaxy Z Fold4', price:15000,num:800 },
        {title:'苹果14 Pro', price:12000,num:900 },
        {title:'OPPO Reno8 Pro', price:8000,num:100 },
        {title:'小米13', price:6000,num:500 },
        {title:'vivo X80', price:7000,num:400 },
        {title:'vivo X70', price:8000,num:300 },
        {title:'vivo X70 Pro', price:9000,num:200 },
        {title:'vivo X60', price:5000,num:600 }

    ];
    console.log(productArr);

        let table = document.querySelector('table');
        for (let i = 0; i < productArr.length; i++) {
            let product = productArr[i];
            let tr = document.createElement('tr');
            let titleTd = document.createElement('td');
            let priceTd = document.createElement('td');
            let numTd = document.createElement('td');
            titleTd.innerText = product.title;
            priceTd.innerText = product.price;
            numTd.innerText = product.num;
            tr.append(titleTd,priceTd,numTd);
            document.querySelector('table').append(tr);
        }


</script>
</body>
</html>